<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>员工列表</title>
    <script type="text/javascript" src="resources/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="resources/js/jquery.param.js"></script>
    <style type="text/css">
        table {
            width: 90%;
            background: #ccc;
            margin: 10px auto;
            border-collapse: collapse;/*border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距*/
        }
        th,td {
            height: 25px;
            line-height: 25px;
            text-align: center;
            border: 1px solid #ccc;
        }
        tr {
            background: #fff;
        }
        a {
            color: red;
        }
    </style>
</head>
<script>
    var e_itemList = [];
    $(function(){
        var urlStr = "http://127.0.0.1:8080/employee_ssh/list.do";
        $.ajax({
            type: "GET",
            contentType: "application/x-www-form-urlencoded",
            url: urlStr,
            xhrFields:{withCredentials:true},
            success:function(data) {
                if(data.msg == "ok") {
                    e_itemList = data.data;
                    reloadDom();
                } else {
                    alert("获取员工信息失败");
                }
            },
            error:function(data) {
                alert("失败，原因为" + data.responseText);
            }
        });
    });
    function reloadDom() {
        for (var i = 0; i < e_itemList.length; i++) {
            var employeeVO = e_itemList[i];
            var dom = "<tr>" +
                    "<td>" + (i + 1) + "</td>" +
                    "<td>" + employeeVO.ename + "</td>" +
                    "<td>" + employeeVO.sexStr + "</td>" +
                    "<td>" + employeeVO.birthday + "</td>" +
                    "<td>" + employeeVO.joinDate + "</td>" +
                    "<td>" + employeeVO.eno + "</td>" +
                    "<td><button data-id='" + employeeVO.id + "' id='itemDetail" + employeeVO.id  + "'>详情</button>  <a href='getEmployee.html?id=" + employeeVO.id + "'></a></td>" +
                    "<td><button data-del='" + employeeVO.id + "' id='del" + employeeVO.id  + "'>删除</button>" + "</td>" +

                    "</tr>";
            $("#container").append($(dom));
            $("#itemDetail" + employeeVO.id).on("click", function(e) {
                window.location.href = "getEmployee.html?id=" + $(this).data("id");
            });
            $("#del" + employeeVO.id).on("click", function(e) {
                var id = $(this).data("del");
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:8080/employee_ssh/del.do?id=" + id,
                    xhrFields:{withCredentials:true},
                    success:function(data) {
                        if(data.msg == "ok") {
                            window.location.href = "employee_list_json.html";
                        } else {
                            alert("获取员工信息失败");
                        }
                    },
                    error:function(data) {
                        alert("失败，原因为" + data.responseText);
                    }
                });
            });
        }

    }
</script>
<body id="main">
<a href=""></a>
<div id="query">
    姓名：<input type="text" /><button>查询</button>
</div>
<div class="course_list">
    <table id="tb">
        <thead>
            <tr>
                <th>序号</th>
                <th>员工姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>入职日期</th>
                <th>员工编号</th>
                <th>详情</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="container">

        </tbody>
    </table>
</div>
</body>
</html>